<script>
// 该组件使用选项式API
    export default{
        // 提供响应式数据
        data() {
            const message = "Welcome to Vue!"
            const num = 0
            return {
                message,
                num
            }
        },
        // 提供方法/函数
        // 数组格式，内部直接写方法
        methods: {
            fn() {
                return "haha"
            }
        },
        // setup vue函数的入口
        setup() {
            console.log("0.setup")
        },
        // 一、组件生命周期：创建阶段
        // 创建前
        beforeCreate() {
            console.log("1.beforeCreate")
            // console.log(this.message, this.fn)
        },
        // 创建后
        // 只有创建后才可访问数据和方法
        created() {
            console.log("2.created")
            // console.log(this.message, this.fn)
            this.timeId = setInterval(()=> {
                console.log(1)
            }, 1000)
        },

        // 二，组件生命周期：挂载阶段
        // 挂载前
        beforeMount() {
            console.log("3.beforeMount")
            // console.log(document.querySelector('p'))
        },
        // 挂载后
        // 只有组件挂载后才可以对dom树进行操作
        mounted() {
            console.log("4.mounted")
            // console.log(document.querySelector('p'))
        },

        // 三，组件生命周期：更新阶段
        // 数据都是最新的,更新的是dom
        // 更新前
        beforeUpdate() {
            console.log("5.beforeUpdate")
            // console.log(this.num)
            // console.log(document.querySelector('span'))
        },  
        // 更新后
        updated() {
            console.log("6.updated")
            // console.log(this.num)
            // console.log(document.querySelector('span'))
        },

        // 四，组件生命周期：销毁阶段
        // 通过v-if将组件标签从dom树上移除，这就是销毁
        // 销毁前
        beforeUnmount() {
            console.log("7.beforeUnmount")
        },
        // 销毁后
        // 该钩子函数主要用于资源回收，比如这个组件在创建之初会自动开启一个计时器
        // 当我们将这个组件销毁后，这个计时器还是会继续运行
        // 此时就可以使用到 beforeUnmount（）和 unmounted（）这两个钩子函数进行处理
        unmounted() {
            console.log("8.unmounted")
            clearInterval(this.timeId)
        }
    }
</script>

<template>
    <div>
        <p>{{ message }}</p>
        <span>{{ num }}</span><br>
        <button @click="num++">+1</button>
    </div>
</template>

<style scoped>

</style>